import React,{useRef, useEffect} from 'react'
import * as echarts from 'echarts'

export default function OrderStatistics() {
  const chart = useRef(null);
  let myChart = null;

  useEffect(() => {
    myChart = echarts.init(chart.current);
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      //图例 数据展示分类
      legend: {
        data: ['蒸发量', '降水量', '平均温度']
      },
      xAxis: [
        {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '水量',
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
            formatter: '{value} ml'
          }
        },
        {
          type: 'value',
          name: '温度',
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: '{value} °C'
          }
        }
      ],
      series: [
        {
          name: '蒸发量',
          type: 'bar',
          yAxisIndex: 0,
          data: [10, 32, 50, 70, 75, 100, 130, 170, 180, 112, 50, 5],
          itemStyle: {
            color: 'rgb(149, 4, 4)'
          }
        },
        {
          name: '降水量',
          type: 'bar',
          yAxisIndex: 0,
          data: [10, 32, 50, 75, 80, 120, 150, 180, 200, 135, 65, 10],
          itemStyle: {
            color: 'rgb(11, 36, 88)'
          }
        },
        {
          name: '平均温度',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' °C';
            }
          },
          data: [5, 5.2, 6.3, 7.5, 9.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
          itemStyle: {
            color: 'rgb(125, 191, 244)'
          }
        }
      ]
    };
    //初始化echarts实例 生成图
    myChart.setOption(option);
      // 使用刚指定的配置项和数据显示图表。
      option && myChart.setOption(option);

      // 实现 echarts 自适应
      const onResize = () => {
        myChart.resize();
      };
      // 监听窗口大小变化
      window.addEventListener('resize', onResize);
  
      // 销毁周期 消除事件监听
      return () => {
        window.removeEventListener('resize', onResize);
        myChart.dispose();
      };
  },[])
  return (
    <div ref={chart} id='orderChart' style={{width: '100%', height: '100%'}}>

    </div>
  )
}
